<!DOCTYPE html>
<html lang="en">
<head>
    {% load staticfiles %}
    {% load MyTag %}
    <meta charset="UTF-8">
    <title>技能题库</title>
    <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.css">
    <script src="/static/bootstrap/js/jquery-2.1.4.min.js"></script>
    <script src="/static/bootstrap/js/bootstrap.js"></script>
</head>
<body id="jineng_body">
    <div id="left_menu">
        <table class="table table-bordered table-hover" id="jineng_table">
            <tr>
                <th class="sortTable">序号</th>
                <th  class="sortTable">单元</th>
                <th  class="sortTable">主题</th>
                <th  class="sortTable">题干</th>
                <th  class="sortTable">数据文件下载</th>
            </tr>
            {% for jineng_title in all_jineng_titles %}
                <tr>
{#                    <td id="id" align="center" valign="middle">{{ jineng_title.id }}</td>#}
                    <td id="id">{{ forloop.counter }}</td>
{#                    <td id="unit">{{ jineng_title.kaoti.name|cut:'机器学习2-' }}</td>#}
                    <td id="unit">{{ jineng_title.kaoti.name|cuttheme }}</td>
                    <td id="theme">{{ jineng_title.theme }}</td>
                    <td id="tigan"><a href="/jineng_bank_titles/{{ jineng_title.id }}.html" target="_blank">{{ jineng_title.tigan|slice_str:'123' }}</a></td>
                    {% if jineng_title.codedata|strlen_gt0 %}
                        <td id="loadfile"><a href="/download/jineng_data_file/{{ jineng_title.codedata_enlabel }}">{{ jineng_title.codedata|cut:"jineng_data_file/" }}</a></td>
                    {% else %}
                        <td id="loadfile">无文件</td>
                    {% endif %}
                </tr>
            {% endfor %}
        </table>
    </div>
{#    <div id="right_content"></div>#}
    <div id="right_advertising">
         <div class="rgt01" >
             <img src="/static/stu_exam_manage/jineng_bacimg/img_12.jpg" alt="" />
             <img src="/static/stu_exam_manage/jineng_bacimg/img_15.jpg" alt="" />
             <img src="/static/stu_exam_manage/jineng_bacimg/img_17.jpg" alt="" />
             <img src="/static/stu_exam_manage/jineng_bacimg/img_19.jpg" alt="" />
             <img src="/static/stu_exam_manage/jineng_bacimg/img_22.jpg" alt="" />
             <img src="/static/stu_exam_manage/jineng_bacimg/img_24.jpg" alt="" />
        </div>
        <div class="list-group" id="infoshow" style="display: none;">
            <a href="http://123.206.58.227:8888" class="list-group-item" target="_blank">jupyter(pwd:123)</a>
            <a href="https://scikit-learn.org/stable/modules/classes.html" class="list-group-item" target="_blank">scikit-learn API</a>
            <a href="https://www.naftaliharris.com/blog/visualizing-k-means-clustering/" class="list-group-item" target="_blank">K-means展示</a>
            <a href="https://www.kaggle.com/" class="list-group-item" target="_blank">kaggle竞赛</a>
            <a href="https://pan.baidu.com/s/1i0ZYK0eVntgrCPTpVJIFig" class="list-group-item" target="_blank">林轩田(6eoz)</a>
            <a href="http://172.27.0.130:8080/timutest/" class="list-group-item" target="_self">八维题库</a>
            <a href="https://github.com" class="list-group-item"  target="_blank">github</a>
            <a href="https://leetcode-cn.com/" class="list-group-item"  target="_blank">leetcode中文</a>
            <a href="https://tianchi.aliyun.com/competition/gameList/activeList" class="list-group-item"  target="_blank">天池大赛</a>
            <a href="https://tianchi.aliyun.com/competition/gameList/activeList" class="list-group-item"  target="_blank">DF,CCF大赛</a>
            <a href="https://www.flyai.com/?s=pmgO8ng7J " class="list-group-item"  target="_blank">flyAI小Demo</a>
        </div>
    </div>

    <style>
        *{
            margin: 0 auto;
            padding: 0;
        }
        body{
            margin: 20px auto;
        }
        td{
            font-size: 14px;
            text-align: center;
            vertical-align: middle;
        }
        th{
            text-align: center;
            vertical-align: middle;
            font-size: 18px;
        }
        #jineng_body{
            width: 85%;
        }
        #id{
            width: 5%;
        }
        #theme{
            width: 15%;
            text-align: left;
            padding-left: 10px;
        }
        #tigan{
            text-align: left;
            width: 63%;
        }
        #unit{
            width: 5%;
        }
        #loadfile{
            width: 30%;
        }
        #right_advertising{
            width: 201px;
            height: 340px;
            position: fixed;
            right: 10px;
            top: 10%;
        }
        .rgt01{
            position: absolute;
            right: 0px;
            {#top: 10%;#}
            width: 48px;
            height: 347px;
        }
        .rgt01 img{
            margin-top:3px;
        }
        .rgt01 img:hover{
            opacity: 0.5;
            transition: opacity 0.5s;
        }
        #infoshow{
            width: 150px;
            height: 335px;
            background-color: rgba(238, 238, 238, 0.5);
            position: absolute;
            left: 0px;
            top: 5px;
            padding: 10px;
        }
        .sortTable{
            cursor: pointer;
        }

    </style>
    <script>
        $('#right_advertising img:nth-child(1)').mouseover(function () {
            $('#infoshow').show()
        })
        $('#right_advertising').mouseleave(function () {
            $('#infoshow').hide()
        })

        // 表格排序
        $('.sortTable').click(function () {
            var $tr = $(this).parent().siblings('tr')
            for(var i = 0 ; i < $tr.length / 2; i++){
                var temp = $($tr[i]).html()
                $($tr[i]).html($($tr[$tr.length-i-1]).html())
                $($tr[$tr.length-i-1]).html(temp)
            }

        })
    </script>
</body>
</html>